<!--
 * @Author: your name
 * @Date: 2021-08-22 17:02:02
 * @LastEditTime: 2021-08-25 17:28:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hmmm-hm86-hmdytt\src\module-hmmm\pages\pageToo
 ls.vue
-->
<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="xue">学科名称:</div>
        <el-input
          width:2rem
          display:inline
          placeholder="请输入内容"
          v-model="input"
          clearable
        >
        </el-input>
        <el-button @click="qing" class="qq">清除</el-button>
        <el-button type="primary" @click="sou">搜索</el-button>
      </div>

      <div v-if="$slots.right" class="right">
        <!-- 右侧 -->
        <slot name="right" />
      </div>
    </div>

    <el-alert title="" type="info">
      <i class="el-icon-info" />数据一共 15条
    </el-alert>
  </el-card>
</template>

<script>
export default {
  mounted() {
    // console.log(this.$slots) // 插槽的列表 是一个对象
    // 员工页面传递了left 和right 两个插槽
    // 审批页面传递了只right 一个插槽
  },
  data() {
    return {
      input: ""
    };
  },
  methods: {
    qing() {
      this.input = "";
      this.$emit("qing");
    },
    sou() {
      this.$emit("sou", this.input);
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  .qq {
    margin-left: 15px;
  }
}
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    .xue {
      width: 150px;
      margin-top: 10px;
    }
  }
}
.tips {
  width: 100% !important;
  line-height: 34px;
  padding: 0px 15px;
  border-radius: 5px;
  border: 1px solid rgba(145, 213, 255, 1);
  background: rgb(184, 255, 20);
  i {
    margin-right: 10px;
    color: #409eff;
  }
}
.right {
  margin-top: 30px;
}
</style>
